<template>
	<view class="register">
		<view class="back">
			<view class="f17">
				绑定电子邮箱
			</view>
		</view>
		<view class="registerform">

			<view class="formitem fcs border-bottom">
				<view class="textr f14">邮箱</view><input type="text"  class="f14"  placeholder="请输入邮箱" v-model="email" /><button :class="!btnfalse?'buttonable':'buttondisable'" :disabled="btnfalse" @click="getCode">{{codeText}}</button>
			</view>

			<view class="formitem fcs border-bottom">
				<view class="textr f14">验证码</view> <input :disabled="intdisabled" :type="logstate?'text':'password'" placeholder-style="color:#ddd;" class="f14 inputhez" maxlength="6" placeholder="前往邮箱查看验证码并填写" v-model="code" />		<image :src="logstate ? '../../static/closeeye.png' : '../../static/openeye.png'"style="width:36rpx ;height:36rpx ;margin-left: 64rpx;position: absolute;
			    right: 0;" @click="eyesin('logstate')"></image>
			</view>
			</view>
			<view class="loginbox f16" @click="bindEmail">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				email:"",
				code:"",
				logstate: false,
				logpaystate:false,
				btnfalse: false,
				intdisabled: false,
				 count:60,
				 codeText:"获取验证码",
			}
		},
		methods:{
			getCode(){
			var that=this
				if (!that.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return false;
				}
			
					let params = {
						email:that.email
					};
				that.$http.post('login.sendEmailCode',params,{ isAuth: false, tipConfig: { isLoading: false } }).then(res=>{
					that.disabled = true;
					that.intdisabled = false;
					that.btnfalse = true;
					clearInterval(that.time);
					that.time = setInterval(() => {
						that.count -= 1;
						that.codeText = that.count + 's后获取';
						if (that.count === 0) {
							that.count = 60;
							that.disabled = false;
							that.btnfalse = false;
							that.codeText = '获取验证码';
							clearInterval(that.time);
						}
					}, 1000);
				})
			
			},
			eyesin(state) {
				if (state == 'logstate') {
					this.logstate = !this.logstate;
				} else {
					this.passtate = !this.passtate;
				}
			},
			bindEmail(){
				if(!this.code){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
var patten = /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
				if(!patten.test(this.email)){
					uni.showToast({
						title: '请输入正确邮箱格式',
						icon: 'none'
					});
					return false;
				}
				let params={
					email:this.email,
					verificationCode:this.code
				}
								this.$http.post('user.bindEmail',params,{ isAuth: true, tipConfig: { isLoading: false } }).then(res=>{
									// console.log(res)
									if(res.code==200){
										// console.log(11)
										setTimeout(() => {
											uni.switchTab({
												url: '../index/index'
											})
										}, 500);	
									}
								})
					
					
			}
		}
	}
</script>

<style lang="less">
	.register{
		margin-top: 40rpx;
		.inputhez{
			border: none;
			outline: none;
		}
		.buttonable{
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			opacity: 1;
			background: #1372df;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #fff;
			position: absolute;
			    right: 0;
				padding: 0;
		}
		.buttondisable{
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			opacity: 1;
			background: rgba(239,239,239,1);
			border-radius: 8rpx;
			font-size: 24rpx;
			color: rgba(109,114,120,1);
			position: absolute;
			    right: 0;
				padding: 0;
		}
		.back{
			justify-content: center;
			align-items: center;
			display: flex;
			font-size: 40rpx;
			margin-left: 30rpx;
			font-weight: 500;
		}
		.logobox{
			margin-top: 46rpx;
			margin-left: auto;
			margin-right: auto;
			width: 204rpx;
			height: 278rpx;
			image{
				width:204rpx;
				height: 278rpx;
			}
		}
		.registerform{
			margin-top: 88rpx;
			padding: 0 30rpx;
		}
		button{
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			opacity: 1;
			background: #1372df;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #fff;
			position: absolute;
			padding: 0;
			    right: 0;
		}
		input{
			width: 400rpx;
			font-size: 14px;
		}
		.gologinbox{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 60rpx;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			width: 340rpx;
			font-size: 36rpx;
			.login{
				display: flex;
				font-size: 36rpx;
				justify-content: space-between;
				align-items: center;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				color: #1372DF;
				
			}
			image{
				width: 28rpx;
				height: 40rpx;
				margin-top: 8rpx;
			}
		}
		
	}
</style>
